<template>
    <div>
        <div class="album" v-if="!imgsIsSelect">
            <div
                class="albumItem"
                v-for="(item, index) in albumList"
                @click="imgsGroundIsSelect(item)"
                :key="index"
            >
                <el-card :body-style="{ padding: '0px' }">
                    <div class="albumImgBox">
                        <img :src="item.visit_path" />
                        <div class="numText">{{ item.album_name }}</div>
                    </div>
                    <div style="padding: 14px;">
                        <div class="bottom">
                            <div class="albumTitle">
                                {{ item.describe }}
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="loadMore" v-if="!(albumList.length < page * pagesize)">
                <el-link type="primary" @click="loadMore">加载更多</el-link>
            </div>
            <div class="loadMore" v-else>
                <el-link type="info">没有更多了</el-link>
            </div>
            <Tips
                :tipsText="'当前暂无相册'"
                v-if="albumList.length == 0"
            ></Tips>
        </div>
        <div v-else>
            <el-page-header
                @back="imgsIsSelect = false"
                content="相册详情"
            ></el-page-header>
            <el-timeline style="margin-top:20px">
                <el-timeline-item
                    :timestamp="lineItem.crate_time"
                    placement="top"
                    v-for="(lineItem, lineIndex) in photoList"
                    :key="lineIndex"
                >
                    <el-card>
                        <div class="albumUser">
                            <el-avatar :src="lineItem.avatar"></el-avatar>
                            <span class="albumUserName"
                                >{{ lineItem.nicheng }}上传了{{
                                    lineItem.listsimg.length
                                }}张照片</span
                            >
                        </div>
                        <div class="album">
                            <div
                                class="imgGround"
                                v-for="(imgItem, imgIndex) in lineItem.listsimg"
                                :key="imgIndex"
                            >
                                <el-image
                                    style="height: 172px;border-radius: 8px;background:#333"
                                    :src="imgItem.visit_path"
                                    :preview-src-list="img_urls"
                                    fit="contain"
                                >
                                </el-image>
                            </div>
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
            <Tips
                :tipsText="'当前暂无相册'"
                v-if="photoList.length == 0"
            ></Tips>
        </div>
    </div>
</template>

<script>
import { getGradePhoto, getPhotoLists } from "@/api/class/index";
import { getFormatTime } from "@/utils/timeUtils";

import Tips from "@/components/tips";
export default {
    components: {
        Tips
    },
    props: {
        //班级列表
        gradeDataList: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    watch: {
        gradeDataList: {
            handler() {
                if (this.gradeDataList.length === 0) {
                    //do something
                    return;
                } else {
                    //do something
                    this.photoList = [];
                    this.albumList = [];
                    this.getDataList();
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            url:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            srcList: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
                "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
            ],
            albumList: [], //相册组
            photoList: [], // 图片详情
            img_urls: [], //图片详情合集
            imgsIsSelect: false,
            page: 1, //第几页
            pagesize: 6 //每页个数
        };
    },
    methods: {
        async getDataList() {
            var gradePhotoList = await getGradePhoto({
                groupid: this.gradeDataList[0].groupid,
                page: this.page,
                pagesize: this.pagesize
            });
            if (gradePhotoList.code == 200) {
                let getData = gradePhotoList.data.data;
                getData.forEach(item => {
                    item.crate_time = getFormatTime(item.crate_time);
                    item.visit_path = item.img_list.data[0]
                        ? item.img_list.data[0].visit_path
                        : require("@/assets/images/logo/logo.png");
                });
                this.albumList = this.albumList.concat(getData);
            } else if (gradePhotoList.code == 400) {
                if (this.albumList.length == 0) {
                    this.$message({
                        message: "该班级暂无相册",
                        type: "warning"
                    });
                }
            }
        },
        //加载更多
        loadMore() {
            this.page++;
            this.getDataList();
        },
        //选择相册
        async imgsGroundIsSelect(item) {
            var data = await getPhotoLists({
                album_id: item.album_id
            });

            if (data.code == 200) {
                var listData = data.data.data;
                for (let i = 0; i < listData.length; i++) {
                    var date = getFormatTime(listData[i].crate_time);
                    listData[i].crate_time = date;
                    for (let j = 0; j < listData[i].listsimg.length; j++) {
                        this.img_urls.push(listData[i].listsimg[j].visit_path);
                    }
                }
                this.photoList = listData;
            } else {
                if (this.photoList.length == 0) {
                    this.$message({
                        message: "该班级暂无相册",
                        type: "warning"
                    });
                }
            }
            this.imgsIsSelect = true;
        }
    }
};
</script>

<style scoped lang="scss">
/* 相册 */
.album {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    .albumItem {
        width: 32%;
        margin: 0 0.66%;
        margin-bottom: 24px;
        cursor: pointer;

        .albumImgBox {
            position: relative;

            img {
                object-fit: cover;
                width: 100%;
                height: 188px;
            }

            .numText {
                font-size: 34px;
                color: #aaa5a5;
                position: absolute;
                bottom: 0;
                right: 10px;
            }
        }

        .bottom {
            display: flex;
            justify-content: space-between;

            .albumTitle {
                line-height: 40px;
                font-size: 15px;
                color: #2d3440;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.albumUser {
    display: flex;
    align-items: center;

    .albumUserName {
        font-size: 14px;
        font-weight: 600;
        margin-left: 10px;
        color: #8f8c8c;
    }
}

.album .el-icon-circle-close {
    font-size: 40px !important;
}

.imgGround {
    width: 24%;
    margin: 10px 0.5%;
    cursor: pointer;
}

.loadMore {
    width: 100%;
    text-align: center;
}
</style>
